<template>
    <div class="about">
        <div v-for="(item,index) in goods" @click="gotoDetails(item.id)" :key="index" class="cardiv" v-show="item.categoryId==15119 || item.id==99761">
             <img :src="item.pic" /><br>
             <p class="card-name" v-html="item.name"></p><br>
             <p class="card-chara"> {{item.characteristic}}</p>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    goods: Object
  },
  data() {
    return {
        // list_card:this.listcard
    };
  },
  methods: {
      gotoDetails(id){
          this.$router.push({
              path:"/gooddetails",
              query:{
                  id
              }
          })
      }
  },
};
</script>
<style>
    .about{
        margin-bottom: 1rem;
    }
    .cardiv{
        width: 45%;
        height: 6rem;
        /* border: 1px solid red; */
        float: left;
        margin-left: 0.22rem;
    }
    .cardiv img{
        width:100%;
        height: 4.5rem;
    }
    .card-name{
        font-size: 0.3rem;
          overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
    }
    .card-chara{
        font-size: 0.2rem;
        color: gray;
    }
</style>